.order-service-details {
  .order-service-details-top {
    align-items: center;
    display: flex;
    &.order-service-details-top-icon-top {
      align-items: flex-start;
    }
    .service-icon {
      margin-right: 15px;
      .icon {
        font-size: 60px;
        @media (min-width: @order-service-title-sm-min) {
          font-size: 64px;
        }
      }
      .image {
        img {
          max-height: 52px;
          max-width: 52px;
          @media (min-width: @order-service-title-sm-min) {
            max-height: 60px;
            max-width: 60px;
          }
          &[src$=".svg"] {
            height: 52px;
            @media (min-width: @order-service-title-sm-min) {
              height: 60px;
            }
          }
        }
      }
    }
    .service-title {
      font-size: 18px;
      font-weight: 600;
      .line-clamp(3, 1.4em); // limit to 3 lines
      @media (min-width: @order-service-title-sm-min) {
        font-size: 22px;
      }
    }
    .service-title-area {
      flex: 1 1 0%; // for .word-break()
      .word-break();
    }
    .service-vendor {
      margin-top: 5px;
    }
    .sub-title {
      color: @color-pf-black-600;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .order-service-description-block {
    margin-top: 15px;
    .description {
      white-space: pre-wrap;
    }
    .learn-more-link {
      font-size: @font-size-small;
      white-space: nowrap;
    }
    .order-service-dependent-image {
      margin-bottom: 5px;
      .word-break();
      .pficon {
        margin-right: 5px;
        vertical-align: -1px;
      }
    }
    .order-service-subheading {
      // Prevent top margin from collapsing.
      display: inline-block;
      font-size: @font-size-base + 1;
      margin-bottom: 7px;
      margin-top: 10px;
    }
  }
  .order-service-documentation-url {
    margin-top: 4px;
  }
  .order-service-tags {
    color: @text-muted;
    margin-top: 5px;
    .tag {
      margin-right: 5px;
      text-transform: uppercase;
    }
  }
}

.order-service-config {
  .config-top {
    .adv-ops {
      height: 30%;
    }
    .adv-ops-href {
      cursor: pointer;
      font-size: 14px;
      &::after {
        content: '\f105';
        font-family: 'FontAwesome';
        padding-left: 10px;
      }
      &.collapsed {
        &::after {
          content: '\f107';
        }
      }
    }
    .adv-ops-container {
      padding-top: 2px;
    }
  }
  .config-bottom {
    height: 12%;
    float: right;
    margin-right: -13px;
    margin-top: 8px;
    margin-right: -10px;
  }
  .footer-panel {
    padding-top: 10px;
    text-align: center;

    a {
      color: @color-pf-white;
      &:hover {
        color: @color-pf-white;
        text-decoration: none;
      }
    }
  }
  .form-group h3 {
    margin-left: -10px;
  }
  h3 {
    line-height: 1.4;
    margin-top: 0;
    + .alert {
      margin-top: 20px;
    }
  }
  .no-projects-cant-create {
    div,
    p {
      text-align: center;
    }
  }
  .or {
    margin-left: 15px;
  }
  .select-plans {
    .plan-name {
      display: inline-block;
      font-size: 14px;
      margin-bottom: 5px;
      margin-top: -2px;
    }
    .plan-description {
      margin-left: 10px;
    }
    .radio {
      margin-top: 15px;
    }
  }
  .select-project-divider {
    border-bottom: 1px solid @color-pf-black-400;
    margin-bottom: 18px;
    margin-top: 22px;
  }
  .sub-title {
    margin: 0 0 10px 0;
    .error-message {
      white-space: pre-line;
    }
  }
  .success-check {
    color: @color-pf-green-400;
  }
  .related-services-container {
    background-color: @color-pf-black-200;
    margin-top: 62px;
    padding: 14px;
    display: flex;
    align-items: center;
    .related-services-label {
      font-size: 14px;
      font-weight: 600;
      padding-right: 14px;
    }
    .related-services-row {
      .card {
        background-color: @color-pf-white;
        border:1px solid @color-pf-black-400;
        float: right;
        margin-right: 6px;
        padding: 11px;
      }
    }
  }
}

.order-service-wizard-step {
  .schema-form-fieldset {
    margin-bottom: 40px;
    margin-top: 40px;
    legend {
      border-bottom: none;
      border-top: solid 1px rgba(0, 0, 0, 0.15);
      margin-bottom: 10px;
      padding-top: 20px;
    }
  }
}
